// 同步模式演示
import React, { useState, useEffect } from 'react';

function sync() {
  console.log('global begin'); // 1. 将此行压入调用栈执行，输出到控制台

  function bar() {
    console.log('bar task'); // 5. 将此行压入调用栈执行，输出到控制台
  } // 6. 将 bar() 函数从调用栈弹出

  function foo() {
    console.log('foo task'); // 3. 将此行压入调用栈执行，输出到控制台
    bar(); // 4. 将 bar 压入调用栈执行 bar() 中的代码
  } // 7. 将 foo() 函数从调用栈弹出

  foo(); // 2. 将 foo 压入调用栈执行 foo() 中的代码

  console.log('global end'); // 8. 将此行压入调用栈执行，输出到控制台
}

export default function SyncDemo () {
  useEffect(sync, null);

  const [content, setContent] = useState([]);

  function append(msg, e) {
    e.preventDefault();
    const result = [].concat(content);
    result.push(msg);
    setContent(result);
  }

  return (
    <div>
      <p>
        bar task
        <button title="add" type="button" onClick={e => append('bar', e)}>
          +
        </button>
      </p>
      <p>
        foo task
        <button title="add" type="button" onClick={e => append('foo', e)}>
          +
        </button>
      </p>
      <div>
        {content.map(item => (
          <span>{item}</span>
        ))}
      </div>
    </div>
  );
}
